<template>
  <div class="gird-right-box">
    <div class="tr">
      <div class="td td1"></div>
      <div class="td hover-animate">
        <div class="academy">
          <div class="box">
            <h3>百廿太理·“凝聚一团心 共筑太理梦”升校旗</h3>
          </div>
        </div>
        <div class="time-box">
          <p>
            <icon iconClass="shijian" color="#fff" style="height: 14px"></icon>
            2022.5.6
          </p>
          <p>
            <icon
              iconClass="31dingwei"
              color="#fff"
              style="height: 16px"
            ></icon>
            求实学院
          </p>
        </div>
      </div>
      <div class="td td3 hover-animate">
        <div class="academy">
          <div class="box">
            <h3>《我与百廿太理的恋爱》-怀念太理精彩瞬间微电影</h3>
          </div>
        </div>
        <div class="time-box">
          <p>
            <icon iconClass="shijian" color="#fff" style="height: 14px"></icon>
            2022.4
          </p>
          <p>
            <icon
              iconClass="31dingwei"
              color="#fff"
              style="height: 16px"
            ></icon>
            大数据学院
          </p>
        </div>
      </div>
      <div class="td td4"></div>
      <div class="td td5 hover-animate">
        <div class="academy">
          <div class="box">
            <h3>春季趣味运动会</h3>
          </div>
        </div>
        <div class="time-box">
          <p>
            <icon iconClass="shijian" color="#fff" style="height: 14px"></icon>
            2022.5.8
          </p>
          <p>
            <icon
              iconClass="31dingwei"
              color="#fff"
              style="height: 16px"
            ></icon>
            明向篮球场
          </p>
        </div>
      </div>
      <div class="td td6"></div>
    </div>
    <div class="tr">
      <div class="td td7 hover-animate">
        <div class="academy">
          <div class="box">
            <h3>“科技展青春风采 创新庆太理百廿”校史故事讲述大赛</h3>
          </div>
        </div>
        <div class="time-box">
          <p>
            <icon iconClass="shijian" color="#fff" style="height: 14px"></icon>
            2022.4
          </p>
          <p>
            <icon
              iconClass="31dingwei"
              color="#fff"
              style="height: 16px"
            ></icon>
            马院报告厅
          </p>
        </div>
      </div>
      <div class="td td8"></div>
      <div class="td td9"></div>
      <div class="td td10 hover-animate">
        <div class="academy">
          <div class="box">
            <h3>百廿太理·校友与学弟学妹座谈</h3>
          </div>
        </div>
        <div class="time-box">
          <p>
            <icon iconClass="shijian" color="#fff" style="height: 14px"></icon>
            2022.5
          </p>
          <p>
            <icon
              iconClass="31dingwei"
              color="#fff"
              style="height: 16px"
            ></icon>
            物电学院
          </p>
        </div>
      </div>
      <div class="td td11 hover-animate">
        <div class="academy">
          <div class="box">
            <h3>百廿太理·“永不停歇，向梦想奔跑”-校园慢跑活动</h3>
          </div>
        </div>
        <div class="time-box">
          <p>
            <icon iconClass="shijian" color="#fff" style="height: 14px"></icon>
            2022.5
          </p>
          <p>
            <icon
              iconClass="31dingwei"
              color="#fff"
              style="height: 16px"
            ></icon>
            虎峪校区
          </p>
        </div>
      </div>
      <div class="td td12"></div>
    </div>
    <div class="tr">
      <div class="td td13 hover-animate">
        <div class="academy">
          <div class="box">
            <h3>“百廿焜煌 赓续梦想”校歌传唱</h3>
          </div>
        </div>
        <div class="time-box">
          <p>
            <icon iconClass="shijian" color="#fff" style="height: 14px"></icon>
            2022.5
          </p>
          <p>
            <icon
              iconClass="31dingwei"
              color="#fff"
              style="height: 16px"
            ></icon>
            明向校区
          </p>
        </div>
      </div>
      <div class="td td14"></div>
      <div class="td td15 hover-animate">
        <div class="academy">
          <div class="box">
            <h3>百廿太理·点亮梦想之旅： 校旗传递活动</h3>
          </div>
        </div>
        <div class="time-box">
          <p>
            <icon iconClass="shijian" color="#fff" style="height: 14px"></icon>
            2022.5
          </p>
          <p>
            <icon
              iconClass="31dingwei"
              color="#fff"
              style="height: 16px"
            ></icon>
            迎西田径场
          </p>
        </div>
      </div>
      <div class="td td16 hover-animate">
        <div class="academy">
          <div class="box">
            <h3>“我心中的太理 太理心愿贴”活动</h3>
          </div>
        </div>
        <div class="time-box">
          <p>
            <icon iconClass="shijian" color="#fff" style="height: 14px"></icon>
            2022.5
          </p>
          <p>
            <icon
              iconClass="31dingwei"
              color="#fff"
              style="height: 16px"
            ></icon>
            东区小广场
          </p>
        </div>
      </div>
      <div class="td td17"></div>
      <div class="td td18"></div>
    </div>
    <div class="tr">
      <div class="td td19"></div>
      <div class="td td20"></div>
      <div class="td td21"></div>
      <div class="td td22"></div>
      <div class="td td23"></div>
      <div class="td td24">
        <div class="time">
          <h4>距离校庆:</h4>
          <p id="spanTime">{{ timeShow }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import timeShow from "../../../utils/timeShow";
export default {
  name: "HomeGirdRight",
  computed: {
    timeShow() {
      return timeShow.call(this);
    },
  },
};
</script>

<style lang="less" scoped>
.gird-right-box {
  width: 100%;
  height: 100vh;
}
.tr {
  height: 25%;
}
.td {
  width: 16.666%;
  height: 100%;
  float: left;
  position: relative;
}

.academy {
  // width: 100%;
  width: 90%;
  position: relative;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}
.academy h3 {
  text-align: center;
  font-family: "Lekton";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
}
.time-box {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 14px;
  margin-bottom: 12px;
}
.time-box p {
  // color: rgba(255, 255, 255,0.7);
  color: #ffffff;
  font-size: 12px;
  // font-weight: 700;
  letter-spacing: 1px;
}
.box {
  width: 100%;
  margin: auto;
}
.td1 {
  background: rgba(240, 194, 134, 0.8);
}
.td2 {
  background: #bc2d3b;
}
.td3 {
  background: #bb2e32;
}
.td4 {
  background: #7e6343;
  opacity: 0.6;
}
.td5 {
  background: rgba(251, 228, 196, 0.8);
}
.td6 {
  background: #bc2d3b;
}
.td7 {
  background: #bc2d3b;
}
.td8 {
  background: rgba(251, 228, 196, 0.6);
}
.td9 {
  background: rgba(234, 149, 107, 0.8);
}
.td10 {
  // background: #e44037;
  background: rgba(228, 64, 55, 0.6);
  // opacity: 0.6;
}
.td11 {
  background: rgba(188, 45, 59, 0.6);
}
.td12 {
  background: rgba(187, 46, 50, 0.6);
}
.td13 {
  background: rgba(228, 64, 55, 0.9);
}
.td14 {
  background: rgba(187, 46, 50, 0.6);
}
.td15 {
  background: #7e6343;
  opacity: 0.6;
}
.td16 {
  background: #bb2e32;
}
.td17 {
  background: #7e6343;
  opacity: 0.6;
}
.td18 {
  background: rgba(228, 64, 55, 0.9);
}
.td19 {
  background: rgba(188, 45, 59, 0.6);
}
.td20 {
  background: #f0c286;
}
.td21 {
  background: #bc2d3b;
}
.td22 {
  background: rgba(240, 194, 134, 0.6);
}
.td23 {
  background: rgba(234, 149, 107, 0.8);
}
.td24 {
  background: #bc2d3b;
}

.td24 h4 {
  color: #ffffff;
  font-family: "Passion One";
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 2px;
  width: 100%;
  text-align: left;
  position: relative;
  left: 20px;
}
.td {
  transition: 0.25s ease-in;
}
//字体动画
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
//翻转
@keyframes flip-vertical-right {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

h3,
h4,
p {
  animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.hover-animate:hover {
  transform: scale(1.2);
  opacity: 0.9;
  z-index: 2;
  h3,
  h4,
  p {
    animation: flip-vertical-right 1.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)
      both;
  }
}
.time {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
#spanTime {
  width: 250px;
  margin-top: 6.1%;
  position: relative;
  font-family: "Digital";
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 10px;
  text-align: center;
}
@media screen and (max-width: 480px) {
  height: 100vw - 180px;
  h3 {
    font-size: 6vw;
  }
  p {
    font-size: 4vw;
  }
  .td {
    display: none;
  }
  .hover-animate {
    display: block;
    width: 33vw;
    height: calc((100vh - 180px) / 3);
  }
}
</style>
